/* eslint-disable no-unused-vars */
<template>
  <!-- logo组件 -->
  <div class="titleWrap com-message-box">
    <div class="login_title">
      <img src="../../../assets/images/xf-logo.png" alt="警徽" class="xf-logo">
      <div class="title-font">{{ title }}</div>
      <div class="dis-spa user-des">
        <p>
          <a href="#">{{ $store.state.user.uinfo.chineseName }}</a>
        </p>
        <p class="btn-com" @click="openEditPasDialog">
          <span class="el-icon-unlock" />
          <span>密码修改</span>
        </p>
        <p class="btn-com" @click="logout">
          <span class="el-icon-switch-button" />
          <span>退出</span>
        </p>
      </div>
    </div>
    <div class="dis-spa search">
      <el-select
        v-model="deviceVal"
        filterable
        clearable
        placeholder="设备名称"
        @change="goDevInfo"
      >
        <el-option v-for="(val,index) in searchDeResult" :key="index" :label="val.deviceName" :value="index" />
      </el-select>
      <!-- <div class="search-centent">
        <el-input
          v-model="searchContent"
          placeholder="请输入内容"
          size="mini"
          prefix-icon="el-icon-search"
          @input="searCenChange"
        />
      </div>
      <div class="search-type">
        <el-input v-model="searchType" placeholder="编号" size="mini" class="input-with-select">
          <el-select slot="append" v-model="oldType" placeholder>
            <el-option label="设备名称" value="deviceName" />
            <el-option label="设备编号" value="deviceNumber" />
            <el-option label="设备类型" value="deviceType" />
          </el-select>
        </el-input>
      </div>
      <transition name="fade">
        <ul v-show="searchContent" class="search-result">
          <div v-if="searchDeResult.length">
            <li
              v-for="(val,index) in searchDeResult"
              :key="index"
              @click="goDevInfo(val)"
            >{{ val.deviceName }}</li>
          </div>
          <div v-else class="no-search-res">暂无结果</div>
        </ul>
      </transition>-->
    </div>
  </div>
</template>

<script>
const defaultSettings = require('@/settings')
import { queryAllByPage } from '@/api/deviceInfo'
export default {
  name: 'Logo',
  data() {
    return {
      // 搜索内容
      searchContent: '',
      searchType: '',
      // 搜索类型
      oldType: 'deviceName',
      // 搜索结果
      searchDeResult: [],
      deviceVal: '',
      title: defaultSettings.title
    }
  },
  created() {
    queryAllByPage({
      pageNum: -1
    }).then(res => {
      this.searchDeResult = res.data
    })
  },
  mounted() {},
  methods: {
    // 搜索内容改变
    searCenChange(e) {
      // const param = { pageNum: -1 }
      // param[this.oldType] = this.searchContent
      // queryAllByPage(param)
      //   .then(res => {
      //     console.log(res)
      //     this.searchDeResult = res.data
      //   })
      //   .catch(error => {
      //     console.log(error)
      //   })
    },
    // 进搜索设备详情
    goDevInfo() {
      const val = this.searchDeResult[this.deviceVal]
      var str = {}
      let component = null
      switch (val.deviceType) {
        case 1:
          // 油罐
          str.enumType = 'OilTank'
          str.modelName = val.modelName
          component = {
            name: 'OilTankInfo'
          }
          break
        case 2:
          // 加油机
          component = {
            name: 'TankerInfo'
          }
          break
        case 3:
          // 摄像机
          component = {
            name: 'CameraInfo'
          }
          break
        case 4:
          // 周界防范电子围栏
          component = {
            name: 'ElectricFenceInfo'
          }
          break
        case 5:
          // 人车识别一体机
          component = {
            name: 'VehiclelDentificationInfo'
          }
          break
        case 6:
          // 汽车零发
          component = {
            name: 'CarZeroInfo'
          }
          break
        default:
          break
      }
      try {
        console.log('===调用webgl===')
        console.log(JSON.stringify(str))
        window.webglInstance.SendMessage(
          'WebScript',
          'QueryData',
          JSON.stringify(str)
        )
      } catch (e) {
        console.log(e)
      }
      component
        ? this.$bus.emit('drawerDialog', {
          component: component.name,
          componentdata: val
        })
        : ''
    },
    // 退出登录
    logout() {
      this.$bus.emit('conformDialog', {
        title: '退出提醒',
        content: '确定要退出系统吗?',
        successFn: this.sureLogout
      })
    },
    sureLogout() {
      this.$store
        .dispatch('user/logout')
        .then(() => {
          this.$router.push({ path: '/login' })
        })
        .catch(() => {})
    },
    // 打开修改密码弹窗
    openEditPasDialog() {
      this.$bus.emit('editPasDialog', {})
    }
  }
}
</script>

<style lang="scss" scoped>
@import "./textEffect.scss";
@import "@/styles/com.scss";
@import "@/styles/variables.scss";

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-active {
  opacity: 0;
}
.titleWrap {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 400px;
  height: 240px;
  z-index: 300;
  .login_title {
    position: relative;
    width: 100%;
    height: 130px;
    background: url("../../../assets/images/header.png") no-repeat;
    background-size: contain;
    .xf-logo,
    .title-font,
    .user-des {
      position: absolute;
    }
    .xf-logo {
      width: 70px;
      height: auto;
      top: 20px;
      left: 20px;
    }
    .title-font {
      top: 53px;
      left: 104px;
      font-size: 20px;
      font-weight: 900;
      font-family: "微软雅黑";
      background: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(0, #feff4d),
        color-stop(0.4, #f9ff7c),
        color-stop(0.5, #d5dfe2),
        color-stop(0.6, #fffeb4),
        color-stop(1, #feff4d)
      );
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: animate 2s infinite;
    }
    .user-des {
      bottom: 5px;
      right: 36px;
      width: 230px;
      height: 35px;
      font-size: 14px;
      color: rgba(255, 255, 255, 0.8);
      p {
        &:first-of-type:hover {
          color: $daihoverColor;
        }
      }
    }
  }
  .search {
    position: relative;
    width: 65%;
    height: 45px;
    margin-top: 40px;
    padding: 0 10px;
    background: $nodeLightBk;
    box-shadow: 0 0 6px #647787;
    & >>> .el-input__inner {
      background-color: transparent;
      border: 1px solid $nodeBorder;
      color: #fff;
    }

    .search-centent {
      flex: 0 0 135px;
    }
    .search-type {
      flex: 0 0 86px;
      height: 27px;
      border-radius: 4px;
      border: 1px solid $nodeBorder;
      & >>> .input-with-select > .el-input__inner {
        display: none;
        padding: 0 5px 0 3px;
      }
      & >>> .el-input__inner,
      & >>> .el-input-group__append {
        padding-left: 0;
        height: 24px;
        border: none;
        background: transparent;
        .el-select {
          margin-left: 0;
        }
      }
      & >>> .el-input__suffix {
        top: 4px;
      }
    }
    .search-result {
      position: absolute;
      left: 0;
      right: 0;
      top: 48px;
      width: 100%;
      height: auto;
      padding: 4px 0;
      margin: 0;
      color: #dedad5;
      background: $nodeLightBk;
      box-shadow: 0 0 6px #647787;
      li {
        padding: 6px 15px;
        margin: 0;
        list-style: none;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        cursor: pointer;
      }
      .no-search-res {
        padding: 10px 0;
        text-align: center;
      }
    }
  }
}
</style>
